<template>
  <div class="menu-item-wrap  margin-top_10">
    <p class="menu-label" :class="{'small-font': isChildMenu}">
      {{itemDate.name}}
      <span style="font-size: 12px; font-weight: 400;">({{ACCESS_LABEL_MAP[itemDate.access]}})</span>
    </p>
    <div class="margin-left_10">
      <Button class="margin-right_10"
              size="small"
              @click="typeof onEdit === 'function' && onEdit()">
        编辑
      </Button>
      <Button type="error"
              size="small"
              @click="typeof onDelete === 'function' && onDelete()">
        删除
      </Button>
    </div>
  </div>
</template>

<script>
import { ACCESS_LABEL_MAP } from './menu-config.vue';

export default {
  name: 'MenuItem',
  props: {
    itemDate: {
      type: Object,
      required: true
    },
    isChildMenu: {
      type: Boolean
    },
    onEdit: {
      type: Function,
      required: true
    },
    onDelete: {
      type: Function,
      required: true
    }
  },
  data () {
    return {
      ACCESS_LABEL_MAP
    };
  }
};
</script>

<style lang="less" scoped>
  .margin-top_10 {
    margin-top: 10px;
  }
  .margin-left_10 {
    margin-left: 10px;
  }
  .margin-right_10 {
    margin-right: 10px;
  }
  .menu-item-wrap {
    display: flex;
    align-items: center;

    .menu-label {
      font-size: 16px;
      font-weight: 600;
    }

    .small-font {
      font-size: 14px;
      font-weight: 400;
    }
  }
</style>
